<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.css">

</head>
<body>
<!--<ul>-->
<!--    <li>1</li>-->
<!--    <li id="sec">2</li>-->
<!--    <li>3</li>-->
<!--    <li>4</li>-->
<!--    <li>5</li>-->

<!--</ul>-->
<!--<div>-->
<!--    <h1 id="title">1111</h1>-->
<!--    <p>2222</p>-->
<!--    <h1>3333</h1>-->
<!--    <p>4444</p>-->
<!--</div>-->



<!--<script src="./js/jquery-3.5.1.js"></script>-->
<!--<script>-->
<!--    $(function (){-->
<!--        $("li").mouseleave(function (){-->
<!--            $(this).css("background-color","red");-->
<!--            $(this).siblings().css("background-color","")-->
<!--        })-->
<!--        $("#sec~li").css("color","blue");-->
<!--        $("#sec+li").css("font-size","25px");-->
<!--        $("#title~h1").css("color","red");-->
<!--    })-->
<!--</script>-->
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>


<button class="btn btn-block">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-danger">按钮</button>

</body>
</html>